<template>
  <div class="permission-page" style="position: relative; height: 100%">
    <div style="display: flex; height: 100%">
      <div style="width: 250px; background-color: white">
        <groupManage ref="myagroup" @select-group="selectGroup" @cli-edit="editGroupFun.cliEdit"></groupManage>
      </div>
      <div style="width: calc(100% - 250px)">
        <pageManage>
          <template #head>
            <div>
              <span class="search-item">标识:</span>
              <a-input v-model:value="searchFun.searchInfo.key" class="search-item" style="width: 120px"></a-input>
            </div>
            <div>
              <span class="search-item">名称:</span>
              <a-input v-model:value="searchFun.searchInfo.name" class="search-item" style="width: 120px"></a-input>
            </div>
            <a-button type="primary" @click="searchFun.searchClick">
              <SearchOutlined />
              查询
            </a-button>
            <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
          </template>
          <template #middle>
            <div style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 15px">
              <a-button type="primary" @click="cli_newAdd">
                <PlusOutlined />
                新增
              </a-button>
            </div>
            <div class="permission-page-table">
              <a-table
                :columns="table.columns"
                :data-source="portComList"
                :pagination="false"
                :scroll="{ y: table.tableHeight }"
                :loading="table.loading"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'option'">
                    <div>
                      <a-button type="link" @click="cli_detail(record)">详情</a-button>
                      <a-button type="link" danger @click="cli_delete(record)">删除</a-button>
                    </div>
                  </template>
                  <template v-if="column.key === 'override'">
                    {{ record.override ? '是' : '否' }}
                  </template>
                </template>
              </a-table>
            </div>
          </template>
          <template #foot>
            <a-pagination
              v-model:current="pagFun.pagInfo.pageNo"
              show-quick-jumper
              :total="pagFun.pagInfo.total"
              :responsive="false"
              @change="pagFun.onChange"
            />
          </template>
        </pageManage>
      </div>
    </div>
    <!--删除弹框    -->
    <a-modal v-model:visible="deleteFun.isDelete" title="删除" @ok="delete_ok">
      {{ `确认删除 ${deleteFun.del_idx.name} 吗 ?` }}
    </a-modal>
    <!-- 新增 右侧抽屉  -->
    <comEdit
      v-if="isEdit === 'new'"
      ref="mycomEdit"
      :upper-rol="upperRol"
      @close-edit="closeEdit"
      @create-success="createSuccess"
    ></comEdit>
  </div>

  <!--权限详情    -->
  <detail
    v-if="isEdit === 'show'"
    :upper-rol="upperRol"
    :app-type-list-tra="searchFun.appTypeListTra"
    :is-edit="isEdit"
    :type-list="searchFun.type"
    :current-item-id="currentItemId"
    @close-edit="closeEdit"
    @create-success="createSuccess"
    @update-success="updateSuccess"
  ></detail>
  <!--权限分组详情  -->
  <detailGroup
    v-if="editGroupFun.isShowDg"
    @update-success="editGroupFun.updateSuccess"
    @close-edit="editGroupFun.close"
  ></detailGroup>
</template>

<script setup>
import { watch, ref, reactive, onMounted, nextTick, computed, toRefs, provide } from 'vue'
import { PlusOutlined, AppstoreOutlined, DatabaseOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import factory from './factory'
import comEdit from './components/edit'
import detail from './components/detail/detail'
import detailGroup from './components/leftgroup/detail'
import pageManage from './components/pageManage'
import groupManage from './components/leftgroup/aGroupManage'

const portComList = ref([])
//==翻页功能======================
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    table.getTableData()
  },
})

//==表格================
const table = reactive({
  columns: [
    {
      title: '操作',
      key: 'option',
      width: 120,
    },
    {
      title: '标识',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '表达式',
      dataIndex: 'action',
      key: 'action',
    },
    {
      title: '角色',
      dataIndex: 'roles',
      key: 'roles',
    },
    {
      title: '更新人',
      dataIndex: 'modifyUser',
      key: 'modifyUser',
    },
    {
      title: '更新时间',
      dataIndex: 'modifyTime',
      key: 'modifyTime',
    },
  ],
  tableHeight: 332,
  getTableData: (pag = { ...pagFun.pagInfo, groupKey: table.parItm.key }) => {
    table.loading = true
    factory.getPermisList(pag).then((res) => {
      table.loading = false
      portComList.value = res.data.dataList
      pagFun.pagInfo.total = Number(res.data.totalCount)
    })
  },
  parItm: { key: '', name: '全部' },
  loading: false,
})
table.getTableData()
onMounted(() => {
  let ele = document.getElementsByClassName('permission-page')
  table.tableHeight = ele[0].offsetHeight - 217
})

//==表格中按钮,编辑,详情,===============
const isEdit = ref('')
const upperRol = ref({}) //分组
const currentItemId = ref({})
const mycomEdit = ref(null)

// ==大按钮新增====cli_newAdd
const cli_newAdd = () => {
  upperRol.value = table.parItm
  isEdit.value = 'new'
  nextTick(() => {
    mycomEdit.value.visible = true
  })
}
const cli_detail = (obj) => {
  upperRol.value = table.parItm
  currentItemId.value = obj
  isEdit.value = 'show'
}
const closeEdit = () => {
  isEdit.value = ''
}
const updateSuccess = () => {
  table.getTableData()
}
const createSuccess = () => {
  table.getTableData()
}

//==删除============================
const deleteFun = reactive({
  isDelete: false,
  del_idx: -1,
})
const cli_delete = (item) => {
  deleteFun.isDelete = true
  deleteFun.del_idx = item
}
const delete_ok = () => {
  factory.deletePermis({ key: deleteFun.del_idx.key }).then((res) => {
    deleteFun.isDelete = false
    table.getTableData()
  })
}

/***查询功能************************/
const mycascader = ref(null) //重置多级选择
const searchFun = reactive({
  searchInfo: { key: '', name: '' },
  searchClick: () => {
    pagFun.pageNo = 1
    let post = { ...pagFun.pagInfo, ...searchFun.searchInfo, parentId: table.parItm.key }
    table.getTableData(post)
  },
  reset: () => {
    searchFun.searchInfo = { key: '', name: '' }
  },
  //所属应用
  appTypeList: [],
  appTypeListTra: computed(() => {
    let arr = searchFun.appTypeList
    arr.forEach((item) => {
      item.label = item.domain
      item.value = item.domain
      item.children = item.list
      item.children.forEach((m) => {
        m.label = m.name
        m.value = m.appKey
      })
    })
    return arr
  }),
  appTypeValeChange: (val) => {
    searchFun.searchInfo.app = val.value
  },
})

//==左侧group选择=============================
const selectGroup = (groupItem) => {
  table.parItm = groupItem
  table.getTableData()
}
//左侧group的编辑
const myagroup = ref(null)
const editGroupFun = reactive({
  isShowDg: false,
  cliEdit: (item) => {
    editGroupFun.isShowDg = true
    currentItemId.value = item
  },
  updateSuccess: () => {
    myagroup.value.getPermisGroup()
  },
  close: () => {
    editGroupFun.isShowDg = false
  },
})

//==子组件依赖注入=========
provide('roleParams', {
  upperRol,
  currentItemId,
  searchFun,
})
</script>

<style lang="less" scoped>
.search-item {
  margin-right: 15px;
}
</style>
<style lang="less">
.permission-page {
  .permission-page-table {
    .ant-tabs {
      padding: 0 !important;
    }

    .ant-btn-link {
      padding: 0 5px !important;
    }
  }
}
</style>
